<template>
  <div class="swiper">
    <swiper :options="swiperOption" ref="mySwiper" v-if="swiperData.length>0">
      <div class="swiper-slide" :data-id="item.id"  v-for="(item,index) in swiperData" :key="index">
        <div class="mask" :data-id="item.id"></div><img :src="item.picLInk" alt="">
      </div>
    </swiper>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  components:{swiper,swiperSlide},
  data(){
    let that=this;
    return {
      swiperData:[
        {id:'68175',picLInk:require('../../assets/img/June/index/bs01.png')},
        {id:'68183',picLInk:require('../../assets/img/June/index/bs02.png')},
        {id:'68203',picLInk:require('../../assets/img/June/index/bs03.png')},
        {id:'68081',picLInk:require('../../assets/img/June/index/bs04.png')},
        {id:'67425',picLInk:require('../../assets/img/June/index/bs05.png')},
        {id:'68263',picLInk:require('../../assets/img/June/index/bs06.png')},
        {id:'68121',picLInk:require('../../assets/img/June/index/bs07.png')},
        {id:'68149',picLInk:require('../../assets/img/June/index/bs08.png')},
        {id:'68069',picLInk:require('../../assets/img/June/index/bs09.png')},
        {id:'68251',picLInk:require('../../assets/img/June/index/bs10.png')}
      ],
      swiperOption:{
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides:6,
        autoplay: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        on:{
          tap(event){
            var itemId=this.clickedSlide.attributes["data-id"].nodeValue;
            that.goSpecialDetails(itemId);
          },
          progress(progress){
            for (let index = 0; index < this.slides.length; index++) {
              let slide = this.slides.eq(index);
              let slideProgress=this.slides[index].progress;
              let modify=1;
              if(Math.abs(slideProgress)>1){modify=(Math.abs(slideProgress)-1)*0.2+1}
              let translate=slideProgress*modify*33+'px';
              let scale=1-Math.abs(slideProgress)/10;
              let zIndex=100-Math.abs(Math.round(10*slideProgress));
              slide.transform('translateX('+translate+') scale('+scale+')' );
              slide.css('zIndex',zIndex);
              slide.css('opacity',1);
              let slideNum=Math.abs(slideProgress);
              if(Math.abs(slideProgress)>4){slide.css('opacity',0)}
            }
          },
          setTransition(transition){
            for (let index = 0; index < this.slides.length; index++) {
              let slide = this.slides.eq(index);
              slide.transition(transition);
            }
          }
        }
      },
    }
  },
  computed: {
    swiper(){ return this.$refs.mySwiper.swiper}
  },
  methods:{
    goSpecialDetails(id){ this.$navtiveUtils.jump2special(id);},
  }
}
</script>
<style lang='less' scoped>
.swiper{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;left: 0;
  z-index: 1000;
  .swiper-slide{
    width: 2rem;
    margin: 0 0.1rem;
    position: relative;
    .mask{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;left: 0;
    }
  }
}
</style>